<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.2.0/dist/MarkerCluster.css" />
        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.2.0/dist/MarkerCluster.Default.css" />
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
        <script src="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.2.0/dist/leaflet.markercluster.js"></script>

        <script src="../src/L.Deflate.js"></script>
        <style>
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>

    <div id="map"></div>

    <script>

    window.onload = function () {
        var map = L.map("map").setView([51.550406, -0.140765], 16);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var features = L.deflate({minSize: 20, markerCluster: true});
        features.addTo(map);

        L.polygon([
            [51.551088, -0.144624],
            [51.550818, -0.143648],
            [51.550701, -0.143718],
            [51.550351, -0.142398],
            [51.550861, -0.142060],
            [51.551155, -0.143160],
            [51.551091, -0.143213],
            [51.551408, -0.144410]
        ])
        .bindPopup('UPS')
        .addTo(features);

        L.polygon([
            [51.550509, -0.140574],
            [51.550221, -0.140622],
            [51.550208, -0.140456],
            [51.550154, -0.140156],
            [51.550316, -0.140113],
        ])
        .bindPopup('Kentish Town Station')
        .addTo(features);

        L.polygon([
            [51.550216, -0.140620],
            [51.549754, -0.140695],
            [51.549702, -0.140290],
            [51.549781, -0.140282],
            [51.549807, -0.140475],
            [51.549849, -0.140478],
            [51.549824, -0.140255],
            [51.550117, -0.140196],
            [51.550127, -0.140290],
            [51.550056, -0.140319],
            [51.550084, -0.140488],
            [51.550206, -0.140488],
            [51.550216, -0.140620]
        ])
        .bindPopup('Wahaca')
        .addTo(features);

        var polyline = L.polyline([
            [51.550836, -0.140684],
            [51.550499, -0.140767],
            [51.550021, -0.140834],
            [51.549684, -0.140891]
        ], {color: 'red'}).addTo(features);

        var marker = L.marker([51.550406, -0.140765]).addTo(features);
    }
    </script>
</html>
